<template>
  <body class="prole">
    <el-container style="height: 100%">
      <el-aside width="15%" class="side-bar">
        <i class="el-icon-back btn" @click="back()"></i>
        <el-menu default-active="1" class="el-menu-vertical-demo menu">
          <el-submenu index="1">
            <template slot="title">
              <img
                src="../assets/icon/传染病.png"
                alt=""
                class="sidebar-icon" />
              <span>传染病</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="1-1" @click="clickSideBar('犬瘟热')"
                >犬瘟热</el-menu-item
              >
              <el-menu-item index="1-2" @click="clickSideBar('犬细小病毒')"
                >犬细小病毒</el-menu-item
              >
              <el-menu-item index="1-3" @click="clickSideBar('犬传染性肝炎')"
                >犬传染性肝炎</el-menu-item
              >
              <el-menu-item index="1-4" @click="clickSideBar('犬冠状病毒')"
                >犬冠状病毒</el-menu-item
              >
              <el-menu-item
                index="1-5"
                @click="clickSideBar('猫泛白细胞减少症')"
                >猫泛白细胞减少症</el-menu-item
              >
              <el-menu-item
                index="1-6"
                @click="clickSideBar('猫病毒性病气管炎')"
                >猫病毒性病气管炎</el-menu-item
              >
              <el-menu-item index="1-7" @click="clickSideBar('皮肤真菌感染')"
                >皮肤真菌感染</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <img
                src="../assets/icon/寄生虫.png"
                alt=""
                class="sidebar-icon" />
              <span>寄生虫病</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="2-1" @click="clickSideBar('蛔虫病')"
                >蛔虫病</el-menu-item
              >
              <el-menu-item index="2-2" @click="clickSideBar('钩虫病')"
                >钩虫病</el-menu-item
              >
              <el-menu-item index="2-3" @click="clickSideBar('绦虫病')"
                >绦虫病</el-menu-item
              >
              <el-menu-item index="2-4" @click="clickSideBar('球虫病')"
                >球虫病</el-menu-item
              >
              <el-menu-item index="2-5" @click="clickSideBar('疥螨虫病')"
                >疥螨虫病</el-menu-item
              >
              <el-menu-item index="2-6" @click="clickSideBar('蚤病')"
                >蚤病</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <img src="../assets/icon/内科.png" alt="" class="sidebar-icon" />
              <span>内科</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="3-1" @click="clickSideBar('口炎')"
                >口炎</el-menu-item
              >
              <el-menu-item index="3-2" @click="clickSideBar('肠炎')"
                >肠炎</el-menu-item
              >
              <el-menu-item index="3-3" @click="clickSideBar('便秘炎')"
                >便秘炎</el-menu-item
              >
              <el-menu-item index="3-4" @click="clickSideBar('胰腺炎')"
                >胰腺炎</el-menu-item
              >
              <el-menu-item index="3-5" @click="clickSideBar('腹膜炎')"
                >腹膜炎</el-menu-item
              >
              <el-menu-item index="3-6" @click="clickSideBar('肛门腺炎')"
                >肛门腺炎</el-menu-item
              >
              <el-menu-item index="3-7" @click="clickSideBar('感冒')"
                >感冒</el-menu-item
              >
              <el-menu-item index="3-8" @click="clickSideBar('鼻炎')"
                >鼻炎</el-menu-item
              >
              <el-menu-item index="3-9" @click="clickSideBar('气管支气管炎')"
                >气管支气管炎</el-menu-item
              >
              <el-menu-item index="3-10" @click="clickSideBar('肺炎')"
                >肺炎</el-menu-item
              >
              <el-menu-item index="3-11" @click="clickSideBar('心力衰竭')"
                >心力衰竭</el-menu-item
              >
              <el-menu-item index="3-12" @click="clickSideBar('尿道感染')"
                >尿道感染</el-menu-item
              >
              <el-menu-item index="3-13" @click="clickSideBar('尿结石')"
                >尿结石</el-menu-item
              >
              <el-menu-item index="3-14" @click="clickSideBar('膀胱炎')"
                >膀胱炎</el-menu-item
              >
              <el-menu-item index="3-15" @click="clickSideBar('肾炎')"
                >肾炎</el-menu-item
              >
              <el-menu-item index="3-16" @click="clickSideBar('佝偻病')"
                >佝偻病</el-menu-item
              >
              <el-menu-item index="3-17" @click="clickSideBar('有机磷中毒')"
                >有机磷中毒</el-menu-item
              >
              <el-menu-item index="3-18" @click="clickSideBar('糖尿病')"
                >糖尿病</el-menu-item
              >
              <el-menu-item index="3-19" @click="clickSideBar('耳血肿')"
                >耳血肿</el-menu-item
              >
              <el-menu-item index="3-20" @click="clickSideBar('中耳炎')"
                >中耳炎</el-menu-item
              >
              <el-menu-item index="3-21" @click="clickSideBar('眼睑内翻')"
                >眼睑内翻</el-menu-item
              >
              <el-menu-item index="3-22" @click="clickSideBar('结膜炎')"
                >结膜炎</el-menu-item
              >
              <el-menu-item index="3-23" @click="clickSideBar('角膜炎')"
                >角膜炎</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title">
              <img src="../assets/icon/外科.png" alt="" class="sidebar-icon" />
              <span>外产科疾病</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="4-1" @click="clickSideBar('外伤')"
                >外伤</el-menu-item
              >
              <el-menu-item index="4-2" @click="clickSideBar('外科感染')"
                >外科感染</el-menu-item
              >
              <el-menu-item index="4-3" @click="clickSideBar('骨折')"
                >骨折</el-menu-item
              >
              <el-menu-item index="4-4" @click="clickSideBar('关节脱位')"
                >关节脱位</el-menu-item
              >
              <el-menu-item index="4-5" @click="clickSideBar('湿疹')"
                >湿疹</el-menu-item
              >
              <el-menu-item index="4-6" @click="clickSideBar('皮炎')"
                >皮炎</el-menu-item
              >
              <el-menu-item index="4-7" @click="clickSideBar('脓皮病')"
                >脓皮病</el-menu-item
              >
              <el-menu-item index="4-8" @click="clickSideBar('脱毛症')"
                >脱毛症</el-menu-item
              >
              <el-menu-item index="4-9" @click="clickSideBar('趾间囊肿')"
                >趾间囊肿</el-menu-item
              >
              <el-menu-item index="4-10" @click="clickSideBar('疝')"
                >疝</el-menu-item
              >
              <el-menu-item index="4-11" @click="clickSideBar('阴道炎')"
                >阴道炎</el-menu-item
              >
              <el-menu-item index="4-12" @click="clickSideBar('阴道脱出')"
                >阴道脱出</el-menu-item
              >
              <el-menu-item index="4-13" @click="clickSideBar('子宫蓄脓')"
                >子宫蓄脓</el-menu-item
              >
              <el-menu-item index="4-14" @click="clickSideBar('难产')"
                >难产</el-menu-item
              >
              <el-menu-item index="4-15" @click="clickSideBar('乳房炎')"
                >乳房炎</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="5">
            <template slot="title">
              <img src="../assets/icon/手术.png" alt="" class="sidebar-icon" />
              <span>常用手术</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="5-1" @click="clickSideBar('绝育')"
                >绝育</el-menu-item
              >
              <el-menu-item index="5-2" @click="clickSideBar('剖腹产')"
                >剖腹产</el-menu-item
              >
              <el-menu-item
                index="5-3"
                @click="clickSideBar('瞬膜腺增生物切除')"
                >瞬膜腺增生物切除</el-menu-item
              >
              <el-menu-item index="5-4" @click="clickSideBar('眼球摘除')"
                >眼球摘除</el-menu-item
              >
              <el-menu-item index="5-5" @click="clickSideBar('立耳术')"
                >立耳术</el-menu-item
              >
              <el-menu-item index="5-6" @click="clickSideBar('断尾术')"
                >断尾术</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="6">
            <template slot="title">
              <img src="../assets/icon/免疫.png" alt="" class="sidebar-icon" />
              <span>免疫</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="6-1" @click="clickSideBar('犬')"
                >犬</el-menu-item
              >
              <el-menu-item index="6-2" @click="clickSideBar('猫免疫程序')"
                >猫免疫程序</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header height="12%" class="header">
          <span style="font-family: 宋体; font-size: 35px">
            虚拟宠物医院学习平台|病例学习-{{ sideName }}
          </span>
        </el-header>
        <el-main width="85%" style="height: 600px">
          <div class="mainbox">
            <el-table :data="tableData" stripe>
              <el-table-column prop="caseId" label="ID" width="100">
              </el-table-column>
              <el-table-column prop="caseName" label="病种名称" width="100">
              </el-table-column>
              <el-table-column prop="disease" label="病例名称" width="100">
              </el-table-column>
              <el-table-column
                prop="textA"
                label="接诊"
                :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column
                prop="textB"
                label="病例检查"
                :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column
                prop="textC"
                label="诊断结果"
                :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column
                prop="textD"
                label="治疗方案"
                :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="operation" label="操作" width="100"
                ><template slot-scope="scope">
                  <el-button
                    @click.native.prevent="showDetail(scope.$index, tableData)"
                    type="text"
                    size="small">
                    详情
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <el-dialog
            title="详细信息"
            :visible.sync="showDetailVisible"
            width="50%"
            :before-close="handleClose">
            <el-tabs tab-position="left" v-model="activeTab">
              <el-tab-pane label="接诊" name="接诊">
                <el-input
                  type="textarea"
                  :rows="8"
                  v-model="detailInfo.textA"
                  disabled>
                </el-input>
                <div
                  class="pic_box_line"
                  :key="index"
                  v-for="(item, index) in detailInfo.photoA">
                  <div class="pic_box">
                    <el-image
                      style="width: 100%; height: 100%"
                      :src="item[0].url"
                      :preview-src-list="[item[0].url]"></el-image>
                  </div>
                  <div class="pic_box" v-if="item[1]">
                    <el-image
                      style="width: 100%; height: 100%"
                      :src="item[1].url"
                      :preview-src-list="[item[1].url]"></el-image>
                  </div>
                  <div class="pic_box" v-else></div>
                  <div class="pic_box" v-if="item[2]">
                    <el-image
                      style="width: 100%; height: 100%"
                      :src="item[2].url"
                      :preview-src-list="[item[2].url]"></el-image>
                  </div>
                  <div class="pic_box" v-else></div>
                </div>
                <div
                  class="pic_box_line"
                  v-for="(item, index) in detailInfo.videoA"
                  :key="index + 'a'">
                  <div class="pic_box">
                    <video
                      controls="controls"
                      :src="item[0].url"
                      type="video/mp4"
                      style="width: 100%; height: 100%"></video>
                  </div>
                  <div class="pic_box" v-if="item[1]">
                    <video
                      controls="controls"
                      :src="item[1].url"
                      type="video/mp4"
                      style="width: 100%; height: 100%"></video>
                  </div>
                  <div class="pic_box" v-else></div>
                  <div class="pic_box" v-if="item[2]">
                    <video
                      controls="controls"
                      :src="item[2].url"
                      type="video/mp4"
                      style="width: 100%; height: 100%"></video>
                  </div>
                  <div class="pic_box" v-else></div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="病例检查" name="病例检查">
                <el-input
                  type="textarea"
                  :rows="8"
                  v-model="detailInfo.textB"
                  disabled>
                </el-input>
                <div
                  class="pic_box_line"
                  :key="index"
                  v-for="(item, index) in detailInfo.photoB">
                  <div class="pic_box">
                    <el-image
                      style="width: 100%; height: 100%"
                      :src="item[0].url"
                      :preview-src-list="[item[0].url]"></el-image>
                  </div>
                  <div class="pic_box" v-if="item[1]">
                    <el-image
                      style="width: 100%; height: 100%"
                      :src="item[1].url"
                      :preview-src-list="[item[1].url]"></el-image>
                  </div>
                  <div class="pic_box" v-else></div>
                  <div class="pic_box" v-if="item[2]">
                    <el-image
                      style="width: 100%; height: 100%"
                      :src="item[2].url"
                      :preview-src-list="[item[2].url]"></el-image>
                  </div>
                  <div class="pic_box" v-else></div>
                </div>
                <div
                  class="pic_box_line"
                  v-for="(item, index) in detailInfo.videoB"
                  :key="index + 'a'">
                  <div class="pic_box">
                    <video
                      controls="controls"
                      :src="item[0].url"
                      type="video/mp4"
                      style="width: 100%; height: 100%"></video>
                  </div>
                  <div class="pic_box" v-if="item[1]">
                    <video
                      controls="controls"
                      :src="item[1].url"
                      type="video/mp4"
                      style="width: 100%; height: 100%"></video>
                  </div>
                  <div class="pic_box" v-else></div>
                  <div class="pic_box" v-if="item[2]">
                    <video
                      controls="controls"
                      :src="item[2].url"
                      type="video/mp4"
                      style="width: 100%; height: 100%"></video>
                  </div>
                  <div class="pic_box" v-else></div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="诊断结果" name="诊断结果"
                ><el-input
                  type="textarea"
                  :rows="8"
                  v-model="detailInfo.textC"
                  disabled>
                </el-input>
                <div
                  class="pic_box_line"
                  :key="index"
                  v-for="(item, index) in detailInfo.photoC">
                  <div class="pic_box">
                    <el-image
                      style="width: 100%; height: 100%"
                      :src="item[0].url"
                      :preview-src-list="[item[0].url]"></el-image>
                  </div>
                  <div class="pic_box" v-if="item[1]">
                    <el-image
                      style="width: 100%; height: 100%"
                      :src="item[1].url"
                      :preview-src-list="[item[1].url]"></el-image>
                  </div>
                  <div class="pic_box" v-else></div>
                  <div class="pic_box" v-if="item[2]">
                    <el-image
                      style="width: 100%; height: 100%"
                      :src="item[2].url"
                      :preview-src-list="[item[2].url]"></el-image>
                  </div>
                  <div class="pic_box" v-else></div>
                </div>
                <div
                  class="pic_box_line"
                  v-for="(item, index) in detailInfo.videoC"
                  :key="index + 'a'">
                  <div class="pic_box">
                    <video
                      controls="controls"
                      :src="item[0].url"
                      type="video/mp4"
                      style="width: 100%; height: 100%"></video>
                  </div>
                  <div class="pic_box" v-if="item[1]">
                    <video
                      controls="controls"
                      :src="item[1].url"
                      type="video/mp4"
                      style="width: 100%; height: 100%"></video>
                  </div>
                  <div class="pic_box" v-else></div>
                  <div class="pic_box" v-if="item[2]">
                    <video
                      controls="controls"
                      :src="item[2].url"
                      type="video/mp4"
                      style="width: 100%; height: 100%"></video>
                  </div>
                  <div class="pic_box" v-else></div></div
              ></el-tab-pane>
              <el-tab-pane label="治疗方案" name="治疗方案"
                ><el-input
                  type="textarea"
                  :rows="8"
                  v-model="detailInfo.textD"
                  disabled>
                </el-input>
                <div
                  class="pic_box_line"
                  :key="index"
                  v-for="(item, index) in detailInfo.photoD">
                  <div class="pic_box">
                    <el-image
                      style="width: 100%; height: 100%"
                      :src="item[0].url"
                      :preview-src-list="[item[0].url]"></el-image>
                  </div>
                  <div class="pic_box" v-if="item[1]">
                    <el-image
                      style="width: 100%; height: 100%"
                      :src="item[1].url"
                      :preview-src-list="[item[1].url]"></el-image>
                  </div>
                  <div class="pic_box" v-else></div>
                  <div class="pic_box" v-if="item[2]">
                    <el-image
                      style="width: 100%; height: 100%"
                      :src="item[2].url"
                      :preview-src-list="[item[2].url]"></el-image>
                  </div>
                  <div class="pic_box" v-else></div>
                </div>
                <div
                  class="pic_box_line"
                  v-for="(item, index) in detailInfo.videoD"
                  :key="index + 'a'">
                  <div class="pic_box">
                    <video
                      controls="controls"
                      :src="item[0].url"
                      type="video/mp4"
                      style="width: 100%; height: 100%"></video>
                  </div>
                  <div class="pic_box" v-if="item[1]">
                    <video
                      controls="controls"
                      :src="item[1].url"
                      type="video/mp4"
                      style="width: 100%; height: 100%"></video>
                  </div>
                  <div class="pic_box" v-else></div>
                  <div class="pic_box" v-if="item[2]">
                    <video
                      controls="controls"
                      :src="item[2].url"
                      type="video/mp4"
                      style="width: 100%; height: 100%"></video>
                  </div>
                  <div class="pic_box" v-else></div></div
              ></el-tab-pane>
            </el-tabs>
          </el-dialog>
        </el-main>
      </el-container>
    </el-container>
  </body>
</template>
<script>
import {
  getCaseList,
  getCase,
  getCasePhoto,
  getCaseVideo,
  downloadCasePhoto,
} from '../api/index'
export default {
  name: 'caseStudy',
  data() {
    return {
      sideName: '犬瘟热',
      tableData: [],
      showDetailVisible: false,
      activeTab: '接诊',
      detailInfo: {
        caseId: '',
        textA: '',
        textB: '',
        textC: '',
        textD: '',
        photoA: [],
        photoB: [],
        photoC: [],
        photoD: [],
        videoA: [],
        videoB: [],
        videoC: [],
        videoD: [],
      },
    }
  },
  mounted() {
    this.clickSideBar('犬瘟热')
  },
  methods: {
    back() {
      this.$router.push({ path: '/study' })
    },
    clickSideBar(name) {
      let data = {}
      data.keyword = name
      getCaseList(data).then((res) => {
        this.tableData = res.data.data
      })
      this.sideName = name
    },
    showDetail(index, tableData) {
      let data = {}
      let categoryList = ['A', 'B', 'C', 'D']
      data.caseId = tableData[index].caseId
      getCase(data).then((res) => {
        this.detailInfo.caseId = res.data.data.caseId
        this.detailInfo.textA = res.data.data.textA
        this.detailInfo.textB = res.data.data.textB
        this.detailInfo.textC = res.data.data.textC
        this.detailInfo.textD = res.data.data.textD
        for (let i in categoryList) {
          let photodata = {}
          photodata.caseId = this.detailInfo.caseId
          photodata.category = categoryList[i]
          getCasePhoto(photodata).then((res) => {
            // this.changeToRequire(res.data.data)
            if (categoryList[i] == 'A') {
              this.detailInfo.photoA = this.divide(res.data.data)
              console.log('lllllllllllllll', this.detailInfo.photoA.length)
            } else if (categoryList[i] == 'B') {
              this.detailInfo.photoB = this.divide(res.data.data)
            } else if (categoryList[i] == 'C') {
              this.detailInfo.photoC = this.divide(res.data.data)
            } else {
              this.detailInfo.photoD = this.divide(res.data.data)
            }
          })
          getCaseVideo(photodata).then((res) => {
            // this.changeToRequire(res.data.data)
            if (categoryList[i] == 'A') {
              this.detailInfo.videoA = this.divide(res.data.data)
            } else if (categoryList[i] == 'B') {
              this.detailInfo.videoB = this.divide(res.data.data)
            } else if (categoryList[i] == 'C') {
              this.detailInfo.videoC = this.divide(res.data.data)
              console.log(
                'this.detailInfo.videoc.length',
                this.detailInfo.videoC
              )
            } else {
              this.detailInfo.videoD = this.divide(res.data.data)
            }
          })
        }
        console.log('detail', this.detailInfo)
      })
      this.showDetailVisible = true
    },
    divide(list) {
      let divide3 = []
      let i = 0
      console.log('photo', list)
      list.forEach((element, index) => {
        if (index % 3 == 0) {
          if (index != 0) {
            i++
          }
          divide3[i] = []
          divide3[i].push(element)
        } else {
          divide3[i].push(element)
        }
      })
      return divide3
    },
    handleClose() {
      this.showDetailVisible = false
    },
    downloadPhoto(item) {
      let data = {}
      console.log('item', item)
      data.photo_id = item.photoId
      console.log(data)
      downloadCasePhoto(data)
        .then((response) => {
          console.log(response)
          const blob = new Blob([response.data], {
            type: 'application/octet-stream',
          })

          // 生成一个可下载的链接
          const downloadLink = URL.createObjectURL(blob)

          // 创建一个 <a> 标签并模拟点击来触发下载
          const link = document.createElement('a')
          link.href = downloadLink
          link.download = 'result.jpg' // 设置下载的文件名
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link)
        })
        .catch((error) => {
          console.error(error)
        })
    },
    downloadVideo(item) {},
    // changeToRequire(photo) {
    //   let temp = ''
    //   for (let j in photo) {
    //     temp = require(photo[j].url)
    //     photo[j].url = temp
    //   }
    // },
  },
}
</script>
<style scoped>
.prole {
  background-image: url('../assets/左边一只白猫.png');
  background-size: 100% 100%;
}
.header {
  text-align: center;
  padding-top: 20px;
}
.btn {
  float: left;
  font-size: 35px;
}
.side-bar {
  background-color: rgba(255, 255, 255, 0.6);
}
.menu {
  margin-top: 35%;
}
::v-deep .el-menu {
  background-color: transparent !important;
}
.sidebar-icon {
  margin-right: 8px;
}
.mainbox {
  background-color: rgba(255, 255, 255);
  border-radius: 25px;
  width: 100%;
  height: 500px;
  padding-top: 25px;
  box-sizing: border-box;
  padding-left: 25px;
  padding-right: 25px;
}
.pic_box_line {
  width: 100%;
  height: 120px;
  /* margin-bottom: 10px; */
  display: flex;
  flex-direction: row;
  margin-top: 10px;
}
.pic_box {
  width: 120px;
  height: 100%;
  float: left;
  flex: 1;
  margin-right: 10px;
}
.download_btn {
  float: right;
  margin-right: 75px;
  margin-top: 45px;
}
::v-deep .el-textarea.is-disabled .el-textarea__inner {
  color: black !important;
  /* background-color: rgba(255, 255, 255, 0.6) !important; */
}
</style>
